<template>
    <div>
      <div :id="id" :style="style"></div>
    </div>
</template>

<script>
export default {
  name: 'Bar',
  data () {
    return {
      // echarts实例
      bar: ''
    }
  },
  props: {
    // 父组件需要传递的参数：id，width，height，option
    id: {
      type: String
    },
    width: {
      default: '100%',
      type: String
    },
    height: {
      default: '100%',
      type: String
    },
    option: {
      type: Object,
      // Object类型的prop值一定要用函数return出来，不然会报错。原理和data是一样的，
      // 使用闭包保证一个vue实例拥有自己的一份props
      default () {
        return {
          title: {
            text: '新自信营收'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            // formatter: '{b}' + '<br/>' + '{a0} : {c0}元' + '<br/>' + '{a1} : {c1}元' + '<br/>' + '{a2} : {c2}%'
            formatter: function (params) {
              let str = params[0].name + '<br/>'
              params.forEach((item, idx) => {
                str += `${item.marker}${item.seriesName} : ${item.data}`
                switch (idx) {
                  case 0:
                    str += '元'
                    break
                  case 1:
                    str += '元'
                    break
                  case 2:
                    str += '%'
                    break
                  default:
                    str += ''
                }
                str += idx === params.length - 1 ? '' : '<br/>'
              })
              return str
            }
            // formatter: function () {
            //   console.log(arguments)
            // }
          },
          toolbox: {
            right: '10%',
            feature: {
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
              // 切换形态
              // magicType: {
              //   type: ['line', 'bar', 'stack']
              // }
            }
          },
          legend: {
            data: ['收入', '支出', '利润']
          },
          xAxis: [{
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#90979c'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            splitArea: {
              show: false
            },
            axisLabel: {
              interval: 0

            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }],
          yAxis: [{
            type: 'value',
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#90979c'
              }
            },
            axisTick: {
              show: true
            },
            axisLabel: {
              interval: 0
            },
            splitArea: {
              show: false
            }
          }
          ],
          series: [{
            name: '收入', // {a0}
            stack: '哈哈',
            type: 'bar',
            barMaxWidth: 35,
            barGap: '10%',
            // labelLine: {
            //   show: true
            // },
            itemStyle: {
              normal: {
                color: 'rgba(255,144,128,1)',
                label: {
                  show: true,
                  position: 'top',
                  formatter: function (p) {
                    return p.value > 0 ? (p.value) : ''
                  }
                }
              }
            },
            data: [59, 209, 369, 109, 109, 209, 59, 209, 369, 109, 109, 209]
          },
          {
            name: '支出', // {a1}
            type: 'bar',
            itemStyle: {
              normal: {
                color: 'rgba(0,191,183,1)',
                barBorderRadius: 0,
                label: {
                  show: true,
                  position: 'top',
                  formatter: function (p) {
                    return p.value > 0 ? (p.value) : ''
                  }
                }
              }
            },
            data: [50, 200, 306, 100, 100, 200, 50, 200, 306, 100, 100, 200]
          },
          {
            name: '利润', // {a2}
            type: 'line',
            symbolSize: 10,
            symbol: 'circle',
            // yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: 'rgba(252,230,48,1)',
                barBorderRadius: 0,
                label: {
                  show: true,
                  position: 'top',
                  formatter: function (p) {
                    return p.value > 0 ? (p.value) : ''
                  }
                }
              }
            },
            data: [20, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
          }]
        }
      }
    }
  },
  computed: {
    style () {
      return {
        height: this.height,
        width: this.width
      }
    }
  },
  created () {
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.chart = this.$echarts.init(document.getElementById(this.id))
      this.chart.setOption(this.option)
    }
  }
}
</script>

<style scoped>

</style>
